<template>
	<!--产业发展现状分析-->
	<div class="development-status">
		<content-block :title="cylb+'企业数量统计'" style="background: none;height:48vh;" :isbackBtn="false">
			<template>
				<el-row>
					<el-col span="8">
						<div class="centerChart">
							<!-- <chart-block chartID="chart2" :title="title" :optionData="BorderPieOptionData" chartType="getBorderPie" height="36vh" :dispatchData="dispatchData" @mouseover="Amouseover" @mouseout="Amouseout"></chart-block> -->
							<chart-block chartID="chart2" :title="BorderPieOptionData.title" :optionData="BorderPieOptionData" chartType="getDashBoardPie" height="36vh" :dispatchData="dispatchData" @mouseover="Amouseover" @mouseout="Amouseout"></chart-block>
						</div>
					</el-col>
					<el-col span="8">
						<div class="leftChart">
							<chart-block chartID="chart1" :title="BlockLineOptionData.title" :optionData="BlockLineOptionData" chartType="getBlockLine" height="36vh" style="padding:0 1vh 3vh 0;"></chart-block>
						</div>
					</el-col>
					<el-col span="8">
						<div class="rightChart">
							<chart-block chartID="chart3" :title="BorderPieOptionData1.title" :optionData="BorderPieOptionData1" chartType="getRosePie" height="36vh" :dispatchData="dispatchData1" @mouseover="Amouseover1" @mouseout="Amouseout1"></chart-block>
						</div>
					</el-col>
				</el-row>
			</template>
		</content-block>
		<content-block :title="cylb+'企业列表'" style="background: none;;height:90vh;margin-bottom:3vh" :isbackBtn="false">
			<template>
				<div class="bottomBox">
					<!--<div class="leftMapvBox">
						<mapv-block :pointList="pointList" :center="center" :zoom="zoom" showMarker="xmfx"></mapv-block>
					</div>-->
					<div class="rightTabBox">
						<div class="titleTab">
							<li v-for="(item,index) in tabList" :key="index" :class="{active:activeIndex==index}" @click="liClick(item,index)">{{ item }}</li>
						</div>
						<div class="contentBox">
							<el-table :data="tableData" border size="mini" style="width: 100%; border: 1px solid #336bce;" :row-style="rowStyle" :cell-style="cellStyle" :header-cell-style="headRowStyle">
								<el-table-column prop="qymc" label="企业全称" width="250" align="center">
									<template slot-scope="scope">
										<div>
											<a style="color:#fff" href="javascript:;" @click="goRouter(scope.row)">{{scope.row.qymc}}</a>
										</div>
									</template>
								</el-table-column>
								<el-table-column prop="jyfw" label="经营范围"></el-table-column>
							</el-table>
							<page-full :pageSize="pageSize" :total="total" @currentChange="currentChange" :currePage="currePage"></page-full>
						</div>

					</div>
				</div>
			</template>
		</content-block>
		<div class="leftPositionBox">
			<div class="suspensionBox">
				<div class="insetBox">
					<div class="insetlist">
						<p>产业</p>
						<ul>
							<!-- <li v-for="(it,index1) in item.cylb">{{it}}</li> -->
							<li v-for="(it,index1) in inseListDataData" :key="index1" :class="{active:cylb===it.cylb,noWrap:it.cylb.length > 7 }" @click="SelLiclick(it.cylb)">{{ it.cylb }}</li>
						</ul>
					</div>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
import {getindustryData, getindustryData1, getindustryData2, getindustryMapData, getindustryTypeData, getindustryAllData, getindustryTypeAllData, getSidebarData, getCompanyCommonData} from '@/api/pages.js'

export default {
	name: "development-status",
	components: {
		ContentBlock: () => import('@/components/contentbg-block'),
		ChartBlock: () => import('@/components/chart-block'),
		MapvBlock: () => import('@/components/mapv-block'),
		PageFull: () => import('@/components/pageFull-block')
	},
	props: {},
	data() {
		return {
			title:'四上企业数量占比',//先定义一个写死的title
			inseListData: [
				{
					title: '产业',
					data: ['化工', '纺织', '食品', '现代农业装备', '电能源', '建材行业']
				}
			],
			inseListDataData: [
				{"cylb": "房地产"}, {"cylb": "现代服务业"}, {"cylb": "食品"},
			],
			BlockLineOptionData: {
				seriesData: [
					{
						name: '', //如果有图例，这个就不能为空
						data: [], //数据
						unit: '', //数据的单位
					},
				],
				LinearGradientColor: [//柱状图渐变色
					{
						topColor: '#47FFBC',
						bottomColor: '#0DCCFF'
					},
				],
			},
			BorderPieOptionData: {},
			BorderPieOptionData1: {},
			pointList: [],
			center: {lng: 119.140177, lat: 35.56202},
			zoom:9,
			activeIndex: 0,
			tabList: ['全 部'],
			tableData: [],
			cylb: '房地产',
			pageSize: 10,
			pageIndex: 1,
			total: 0,
			items: '',
			dispatchData: {},
			Maxindex: 0,
			dispatchData1: {},
			Maxindex1: 0,
			currePage: 1,
			companyName: '',
			companyId: '',
		}
	},
	computed: {},
	created() {

	},
	mounted() {
		this.getindustryData('E011', this.cylb)
		this.getindustryData1('E012', this.cylb)
		this.getindustryData2('E013', this.cylb)
		this.getindustryMapData('C015', this.cylb)
		this.getindustryTypeData('C014', this.cylb)
		this.getindustryAllData('P003', this.cylb, this.pageIndex, this.pageSize)
		this.getSidebarData('C073', this.cylb)
	},
	methods: {
		goRouter(item) {
			this.companyName = item.qymc
			this.companyId = item.qyId
			sessionStorage.setItem('companyName', this.companyName)
			getCompanyCommonData('C099',this.companyId).then( res => {
				let flag = res.data.data.list[0].ssFlag
				this.$router.push({
					path: '/enterprise/tabswich/',
					query: {
						companyId: this.companyId,
						flag: flag
					}
				})
			})
			console.log('----getCompanyCommonData',getCompanyCommonData);
		},
		liClick(item, index) {
			this.activeIndex = index
			this.items = item
			if (item === '全 部') {
				this.getindustryAllData('P003', this.cylb, this.pageIndex, this.pageSize)
			} else {
				this.getindustryTypeAllData('P004', this.cylb, item, this.pageIndex, this.pageSize)
			}
		},
		rowStyle({row, rowIndex}) {
			let styleJson = {}
			if (rowIndex % 2 === 0) {
				styleJson = {'background': 'rgba(0,16,75,0)', 'color': '#fff'}
			} else {
				styleJson = {'background': 'rgba(0,32,194,0)', 'color': '#fff'}
			}
			return styleJson
		},
		cellStyle({row, column, rowIndex, columnIndex}) {
			return 'border-color:#336bce;padding:4px 0'
		},
		headRowStyle({row, rowIndex}) {
			let styleJson = {}
			return {'background': 'rgba(0,36,255,0)', 'color': '#fff', 'border-color': 'rgb(51, 107, 206)'}
		},
		SelLiclick(cylb) {
			this.cylb = cylb
			this.getindustryData('E011', this.cylb)
			this.getindustryData1('E012', this.cylb)
			this.getindustryData2('E013', this.cylb)
			this.getindustryMapData('C015', this.cylb)
			this.getindustryTypeData('C014', this.cylb)
			this.getindustryAllData('P003', this.cylb, this.pageIndex,this.pageSize)
			// this.getSidebarData('C073', this.cylb)
		},
		// 分页
		currentChange(e) {
			this.currePage = e
			// if(this.items=='全 部'){
			this.getindustryAllData('P003', this.cylb, e, this.pageSize)
			// }else{
			// 	this.getindustryTypeAllData('P004',this.cylb,this.items,e,this.pageSize)
			// }
		},
		// 重点产业发展现状分析-企业发展
		getindustryData(busiCode, cylb) {
			getindustryData(busiCode, cylb).then(res => {
				if (res.data.code === 200) {
					this.BlockLineOptionData = {
						title: res.data.data.title,
						categoryAxis: res.data.data.categoryAxis,
						seriesData: res.data.data.seriesData[0].data,
						unit: res.data.data.seriesData[0].unit, //数据的单位
						LinearGradientColor: [//柱状图渐变色
							{
								topColor: '#47FFBC',
								bottomColor: '#0DCCFF'
							},
						],
					}
				}
			}).catch(err => {

			})
		},
		// 2019年企业类别分类
		getindustryData1(busiCode, cylb) {
			getindustryData1(busiCode, cylb).then(res => {
				if (res.data.code === 200) {
					var MaxArr = []
					let _this = this
					res.data.data.seriesData[0].data.forEach((item, index, arr) => {
						MaxArr.push(item.value)
					})
					var MaxData = Math.max(...MaxArr)
					for (let i = 0; i < MaxArr.length; i++) {
						if (MaxArr[i] === MaxData) {
							_this.Maxindex = i
						}
					}
					this.dispatchData = {
						type: 'highlight',
						seriesIndex: 0,
						dataIndex: _this.Maxindex
					}
					this.BorderPieOptionData = {
						title: res.data.data.title,
						// title:'四上企业数量占比',
						seriesData: res.data.data.seriesData[0].data,
						titleText: res.data.data.seriesData[0].data[0].value,
						color: ['#F4A95B', '#6363FF', '#00BEFC'],
						seriesCenter: ['50%', '50%'],
						legendShow: false,
						right: '999999999999999999%',
						pieSelect: true
					}
				}
			}).catch(err => {

			})
		},
		// 侧边栏数据
		getSidebarData(busiCode, cylb) {
			getSidebarData(busiCode, cylb).then(res => {
				if (res.data.code === 200) {
					this.inseListDataData = res.data.data.list;
					console.log('inseListDataData', this.inseListDataData);
				}
			}).catch(err => {

			})
		},
		// 企业注册资本分布
		getindustryData2(busiCode, cylb) {
			getindustryData2(busiCode, cylb).then(res => {
				if (res.data.code === 200) {
					var MaxArr = []
					let _this = this
					res.data.data.seriesData[0].data.forEach((item, index, arr) => {
						MaxArr.push(item.value)
					})
					var MaxData = Math.max(...MaxArr)
					for (let i = 0; i < MaxArr.length; i++) {
						if (MaxArr[i] === MaxData) {
							_this.Maxindex1 = i
						}
					}
					this.dispatchData1 = {
						type: 'highlight',
						seriesIndex: 0,
						dataIndex: _this.Maxindex1
					}
					this.BorderPieOptionData1 = {
						title: res.data.data.title,
            unit:res.data.data.seriesData[0].unit,
						seriesData: res.data.data.seriesData[0].data,
						// color: ['rgba(12, 252, 255, 1)', 'rgba(0, 189, 251, 1)', 'rgba(31, 255, 158, 1)','rgba(253, 210, 48, 1)'],
						// right: '3%',
						// pieSelect: true
					}
				}
			}).catch(err => {

			})
		},
		// 地图分布
		getindustryMapData(busiCode, cylb) {
			getindustryMapData(busiCode, cylb).then(res => {
				if (res.data.code === 200) {
					let mapData = []
					var lng = 0
					var lat = 0
					res.data.data.list.forEach((item, index, arr) => {
						mapData.push({
							name: item.qymc,
							lng: item.longtitude,
							lat: item.latitude,
							id: item.qyId,
							sfzdxm: 2
						})
						lng += parseFloat(item.longtitude) / res.data.data.list.length
						lat += parseFloat(item.latitude) / res.data.data.list.length
					})
					this.pointList = mapData
					this.center.lng = lng
					this.center.lat = lat
				}
			}).catch(err => {

			})
		},
		// 企业类别
		getindustryTypeData(busiCode, cylb) {
			getindustryTypeData(busiCode, cylb).then(res => {
				if (res.data.code === 200) {
					this.tabList = ['全 部']
					res.data.data.list.forEach((item, index, arr) => {
						// this.tabList.push(item.qylb)//先屏蔽掉其他两类数据企业
					})
				}
			}).catch(err => {

			})
		},
		// 全部企业
		getindustryAllData(busiCode, cylb, current, size) {
			getindustryAllData(busiCode, cylb, current, size).then(res => {
				if (res.data.code === 200) {
					this.total = res.data.data.list.total
					this.tableData = res.data.data.list.records
				}
			}).catch(err => {

			})
		},
		// 筛选企业
		getindustryTypeAllData(busiCode, cylb, qylb, current, size) {
			getindustryTypeAllData(busiCode, cylb, qylb, current, size).then(res => {
				if (res.data.code === 200) {
					// console.log(res.data.data)
					this.total = res.data.data.list.total
					this.tableData = res.data.data.list.records
				}
			}).catch(err => {

			})
		},
		Amouseover(e) {
			let _this = this
			if (e.dataIndex !== this.Maxindex)
				this.dispatchData = {
					type: 'downplay',
					seriesIndex: 0,
					dataIndex: _this.Maxindex
				}
		},
		Amouseout(e) {
			let _this = this
			// this.Maxindex = e.dataIndex;
			this.dispatchData = {
				type: 'highlight',
				seriesIndex: 0,
				dataIndex: _this.Maxindex
			}
		},
		Amouseover1(e) {
			let _this = this
			if (e.dataIndex !== this.Maxindex1)
				this.dispatchData1 = {
					type: 'downplay',
					seriesIndex: 0,
					dataIndex: _this.Maxindex1
				}
		},
		Amouseout1(e) {
			let _this = this
			// this.Maxindex = e.dataIndex;
			this.dispatchData1 = {
				type: 'highlight',
				seriesIndex: 0,
				dataIndex: _this.Maxindex1
			}
		}
	},
	updated() {
		// this.$chartPieEvent.dispatchAction({type: 'highlight',seriesIndex: 0,dataIndex: 1})
	},
	watch: {}
}
</script>

<style scoped lang="scss">
.development-status {
	width: 100%;
	// height: 100%;
	padding: 0 1.3vw 1.85vh 1.3vw;

	.leftChart {
		margin-right: .5vw;
	}

	.centerChart {
		margin: 0 .5vw
	}

	.rightChart {
		margin-left: .5vw;
	}

	.bottomBox {
		width: 100%;
		height: calc(90vh - 100px);
		border: 1px solid #0E7FD6;
		box-shadow: inset 0px 0px 21px -8px #20bee1;
		padding: 1vw;
		box-sizing: border-box;

		.leftMapvBox {
			width: 35%;
			height: 100%;
			float: left;
		}

        .rightTabBox {
			width:100%;
			height: 100%;
			/*float: right;*/
			.titleTab {
				width: 100%;
				height: 4vh;
				background: rgba(0, 0, 0, .35);
				border-bottom: 1px solid #0E7FD6;

				li {
					list-style: none;
					line-height: 4vh;
					padding: 0 1.5vh;
					font-size: 0.95vw;
					font-weight: 550;
					color: #47B2F1;
					background-image: -webkit-linear-gradient(top, #47B2F1, #2692DD);
					-webkit-background-clip: text;
					-webkit-text-fill-color: transparent;
					display: inline-block;
					cursor: pointer;
					border-bottom: 1px solid #47B2F1
				}

				li.active {
					color: #FFA700;
					border-bottom: 1px solid #FFA700;
					background-image: -webkit-linear-gradient(top, #FFE879, #f09c00);
					-webkit-background-clip: text;
					-webkit-text-fill-color: transparent;
				}
			}

			.contentBox {
				width: 100%;
				height: calc(100% - 4vh);
				overflow-y: scroll;
				padding-top: 1.5vh;
				box-sizing: border-box;

				/deep/ {
					.el-table {
						tbody tr {
							&:hover {
								td {
									background-color: rgba(0, 20, 86, 0)
								}
							}
						}
					}
				}

				/deep/ {
					.el-table--mini, .el-table--small {
						background: none;
					}
				}

				/deep/ {
					.el-table::before {
						height: 0px;
					}
				}

				/deep/ {
					.el-table th, .el-table tr {
						background: none;
					}
				}

				/deep/ {
					.el-table--border {
						border-color: rgb(51, 107, 206)
					}
				}
			}
		}
	}

	.leftPositionBox {
		width: 13vh;
		height: 13vh;
		background: url(../../assets/images/xfy.png);
		background-size: 100% 100%;
		position: fixed;
		left: -3vw;
		top: 45%;
		cursor: pointer;

		.suspensionBox {
			width: 100%;
			height: 100%;
			position: relative;

			.insetBox {
				width: 15vw;
				height: auto;
				min-height: 20vh;
				padding: .5vw .5vw 1.5vw .5vw;
				position: absolute;
				top: -2vh;
				left: 5.6vw;
				background: url(../../assets/images/xf.png);
				background-size: 100% 100%;
				overflow: hidden;
				box-sizing: border-box;
				display: none;

				.insetlist {
					width: 100%;
					height: auto;
					padding:1vh 0;
					overflow: hidden;

					p {
						width: 100%;
						color: #ccc;
						text-align: center;
						font-size: 1.04vw;
						line-height: 3.5vh;
						margin-top: 1vh
					}

					ul {
						width: 100%;
						height: auto;
						overflow: hidden;
						padding: 0.2vh 0.2vw;
						box-sizing: border-box;
						display: flex;
						justify-content: space-between;
						flex-wrap: wrap;

						li {
							width: 50%;
							list-style: none;
							color: #47B2F1;
							font-size: 0.8vw;
							padding: 0 0.7vw;
							line-height: 2.7vh;

							&.noWrap {
								width:100%;
							}
						}

						li.active {
							color: #ccc
						}
					}
				}
			}
		}
	}

	.leftPositionBox:hover .suspensionBox > .insetBox {
		display: block;
	}
}
</style>
<style>
.el-table--border::after, .el-table--group::after, .el-table::before {
	background-color:rgb(51, 107, 206)
}
</style>
